<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        hello
        <hello></hello>
    </div>
</body>
</html>
<script src='vue.js'></script>
<script>
    let hello = {
        template:'<div>hello,{{num}} <button @click="fn">子组件按钮</button></div>',
        data(){
            return {
                num:10
            }
        },
        methods:{
            fn(){
                this.num = 20;
            }
        },
        beforeCreate(){
                console.log('child-beforeCreate')
        },
        created(){
            console.log('child-created')
        },
        beforeMount(){
            console.log('child-beforeMount')
        },
        mounted(){
            console.log('child-mounted')
        },
        beforeUpdate(){
            console.log('child-beforeUpdate')
        },
        updated(){ 
            console.log('child-updated')
        },
        beforeDestroy(){
            console.log('child-beforeDestroy')
        },
        destroyed(){ 
            console.log("child-destroyed")    
        },
    }
    let vm = new Vue({ //根实例
        el:'#app',
        beforeCreate(){//一般不会用
            console.log('beforeCreate');
        },
        created(){  //可以拿到数据 请求ajax,不能操作DOM
            console.log('created')
        },
        data:{
            msg:10
        },
        // render(){  //createElement()
        //     console.log('render')
        // },
        // template:"<div>world</div>",
        beforeMount(){  //执行render函数,一般不会做些事情
            console.log('beforeMount')
        },
        mounted(){ //操作DOM元素
            console.log('mounted')
        },
        beforeUpdate(){
            console.log('beforeUpdate')
        },
        updated(){  //不要在这里面再更新数据，会行程死循环
            // this.msg = Math.random();
            console.log('updated')
        },
        beforeDestroy(){
            console.log('beforeDestroy')
        },
        destroyed(){ //清楚定时器和事件
            console.log("destroyed")    
        },
        components:{
            hello
        }
    })
     vm.$destroy()  //手动销毁
</script>